<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
     <script src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/js/lib/jquery-1-edb203c114.10.2.js"></script>
    <style>
        .cart{width: 1519px;height: 900px;background-color: rgb(238, 237, 238);}
        .head{width: 1519px;height: 40px;background-color: rgb(233, 230, 230);}
        .head li{float: right;width: 65px;text-align: center;font-size: 13px;border-right: 1px solid rgb(160, 158, 158);margin-top: 10px;}
        .head a{color: rgb(105, 104, 104);font-weight: bold;}
        .head a:hover{color: rgb(204, 16, 16);}
        .head li:nth-child(1){margin-right: 100px;border: none;}
        .nav{width: 1519px;height: 80px;background-color: white;border-bottom: 3px rgb(212, 210, 210) solid;}
        .nav img{float: left;margin-left: 80px;margin-right: 90px;}
        .nav span{font-size: 28px;line-height: 80px;margin-left: 30px;}
        .main{width: 1219px;height: 50px;background-color: white;margin: auto;margin-top: 20px;}
        .main li{float: left;width: 120px;height: 50px;line-height: 50px;text-align: center;font-size: 13px;color: rgb(160, 158, 158);}
        .main li:nth-child(2){width: 470px;text-align: left;}
        .main li:nth-child(1){width: 190px;}
        .main2 li img{width: 50px;height: 50px;}
        .main input{margin: 5px 20px 0px 0px;}
        .main2{width: 1219px;background-color: white;margin: auto;margin-top: 20px;height: 400px;}
        .main2 li{float: left;width: 120px;height: 50px;line-height: 50px;text-align: center;font-size: 13px;color: rgb(24, 23, 23);margin-top: 20px;}
        .main2 li:nth-child(2){width: 470px;text-align: left;}
        .main2 li:nth-child(1){width: 190px;margin-top: 10px;}
        .main2 li:nth-child(5){color: brown;font-weight: bold;}
        .main2 input{margin: 5px 20px 0px 50px;line-height: 50px;}
        .main2 span{width: 25px;height:25px;text-align: center;line-height: 25px;border: 1px solid black;display: block;float: left;margin-top: 10px;}
        .main2 span:nth-child(1){margin-left: 23px;}
        .buy{width: 1219px;height: 50px;background-color: white;margin: auto;margin-top: 20px;}
        .buy li{float: left;width: 120px;height: 50px;line-height: 50px;font-size: 13px;}
        .buy li:nth-child(2){width: 690px;text-align: left;}
        .buy li:nth-child(1){width: 190px;text-align: center;}
        .buy li:nth-child(3){width: 175px;text-align: left;}
        .buy li:nth-child(4){width: 163px;text-align: right;background-color: rgb(206, 54, 54);text-align: center;color: white;}
        .buy li:nth-child(4):hover{background-color: brown;}
        .buy input{margin: 5px 20px 0px 0px;}
        .buy1 li{height: 20px;margin-top: 18px;line-height: 20px;text-align: center;text-align: right;font-size: 15px;}
        .buy1 i{color: brown;font-weight: bold;}
       
    </style>
</head>
<body>
    <div class="cart">
        <div class="head">
            <ul>
                <li><a href="file:///C:/Users/LENOVO/Desktop/e-pet-website/index.html">返回</a></li>
                <li><a href="">客服服务</a></li>
                <li><a href="">我的订单</a></li>
                <li><a href="file:///C:/Users/LENOVO/Desktop/e-pet-website/item.html">注册</a></li>
                <li><a href="file:///C:/Users/LENOVO/Desktop/e-pet-website/login.html">登录</a></li>
            </ul>
     </div>
     <div class="nav">
       <img src="./img/logo4.png" alt="">
       <span>我的购物车</span>
     </div>
     <div class="main">
         <ul>
             <li><input type="checkbox" class="all-sel" onchange="allSelChange(this)">全选</li>
             <li>商品</li>
             <li>单价</li>
             <li>数量</li>
             <li>小计</li>
             <li>操作</li>
         </ul>
     </div>
     <div class="main2">
         <ul id="shop"> 
            <li><input type="checkbox"><img src="./img/mini1.jpg" alt=""></li>
            <li></li>
            <li class="price"></li>
            <li id="sps">
               <span>-</span><span class="count" class="pnum"></span><span>+</span>
            </li>
            <li></li>
            <li></li>
         </ul>
     </div>
     <div class="buy">
        <ul>
            <li><input type="checkbox" class="checkall" onchange="allSelChange(this)" >全选</li>
            <li>删除</li>
            <li>
                <ul class="buy1">
                    <li>总计<i class="price-sum"></i></li>
                   
                </ul>
            </li>
            <li>立即结算</li>
        
         </ul>
     </div>
    </div>
    <script src="./js/axios.min.js"></script>
    
    <script>
        /* 查询用户购物车中的商品 接口

        接口地址：http://jx.xuzhixiang.top/ap/api/cart-list.php
        接口请求方式：get
        接口参数：
        id  用户id

        使用方式
        获取id为1的用户的购物车
        http://jx.xuzhixiang.top/ap/api/cart-list.php?id=1

        服务器返回json数据 */
       let id = localStorage.getItem("id");console.log(id);
        let imgs= document.querySelector(".main img");
        let h3= document.querySelector(".mainx1 h3");
        let p= document.querySelector(".mainx1 p");
        let m= document.querySelector(".mainx1 m"); 
        let main = document.querySelector(".main2");

        gwc()
        function gwc(){
            let detailProductAPI = "http://jx.xuzhixiang.top/ap/api/cart-list.php";
        axios.get(detailProductAPI, { params: { id} })
            .then((r) => {
                let pObj = r.data.data;
                console.log(pObj);
            let art =pObj.map((v)=>
                ` <ul id="shop">
                <li><input type="checkbox" class = "single-select"" onchange="singleSelect(${v.pid},this)" ><img src="${v.pimg}" alt=""></li>
                 <li>${v.pname}</li>
                 <li class="price"><i>￥</i>${v.pdesc}</li>
                 <li id="sps">
                 <span onclick=jian(this)>-</span><span class="pnum">${v.pnum}</span><span onclick=jia(this)>+</span>
                 </li>
                 <li><i>￥</i>${v.pdesc * v.pnum}</li>
                 <li class = "del" data-id = "${v.id}" onclick=del(${v.pid})>删除</li></ul>`
                ).join("");
              document.querySelector(".main2").innerHTML = art;
              
           }
        //    onclick = liu(this)>
                );
        }
          
    </script>
    <script>
    let pagNum=0
        function jian(r){
            pagNum--
            $(r).next().html( pagNum--)
        }
       function jia(r){
           pagNum++
           $(r).prev().html(pagNum)
       }

    //    接口地址：http://jx.xuzhixiang.top/ap/api/cart-delete.php
    // 接口请求方式：get
    // 接口参数：
    //      uid  用户id
    //      pid  商品id

    // 使用方式
    //      删除用户1中的 id为1商品
    //      http://jx.xuzhixiang.top/ap/api/cart-delete.php?uid=1&pid=1

    // 服务器返回json数据
    let uid=localStorage.getItem("id")
    console.log(uid);
       function del(id){
           $.get("http://jx.xuzhixiang.top/ap/api/cart-delete.php",{uid,pid:id})
           gwc()
       }

    </script>
    <!--  <script>
        /* 删除用户购物车中的商品 接口

       接口地址：http://jx.xuzhixiang.top/ap/api/cart-delete.php
       接口请求方式：get
       接口参数：
         uid  用户id
         pid  商品id

       使用方式
         删除用户1中的 id为1商品
         http://jx.xuzhixiang.top/ap/api/cart-delete.php?uid=1&pid=1

       服务器返回json数据 */
       let main = document.querySelector(".main2");
       main.onclick = function(evt){
           if(evt.target.className =="del"){
               console.log("点击了删除按钮");
               let id = evt.target.getAttribute("data-id");
               console.log(id);
               pObj = pObj.filter((v)=> v.id !=id);
               let art =pObj.map((v)=>
                ` <ul id="shop">
                <li><input type="checkbox"><img src="${v.pimg}" alt=""></li>
                 <li>${v.pname}</li>
                 <li>${v.pprice}</li>
                 <li id="sps">
                 <span>-</span><span>0</span><span>+</span>
                 </li>
                 <li>${v.pprice}</li>
                 <li class = "del" data-id = "${v.id}">删除</li> </ul>`
                ).join("");
              document.querySelector(".main2").innerHTML = art;
                
                

            };
           }
       
    </script> -->

<script>
    // function liu(v){console.log(v);}
    // $(function(){
    //     //把全选按钮(checkall)的状态赋值给 三个小的按钮(j-checkbox)就可以了
    //     //时间可以用change
    //     $(".checkall").change(function(){
    //        //console.log( $(this).prop("checked"));
    //        $(".j-checkbox,.checkall").prop("checked",$(this).prop("checked"));
    //     });
    //     //2.如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选
    //    $(".j-checkbox").change(function(){
    //         /* if(被选中的小复选框的个数==3){
    //             就要选中全选按钮
    //         }else{
    //             不要选中全选按钮
    //         } */
    //         console.log($(".j-checkbox:checked").length);
    //       if($(".j-checkbox:checked").length === $(".j-checkbox").length){
    //            $(".checkall").prop("checked",true);
    //        }else{
    //         $(".checkall").prop("checked",false);
    //        }
    //     }) 
    // })

        //单选事件
      function singleSelect(pid, ipt) {
        console.log(ipt.checked);
        //找到所有单选框
        calCountPrice();
        let singleSelectArr = document.querySelectorAll(".single-select");
        //判断 singleSelectArr 是否所有的单选按钮都为true
        // 如果都都true ，让 全选 变成true 。反之 全选变成false
        // singleSelectArr --伪数数组，并不能使用 数组的方法
        let arr = [...singleSelectArr];
        let isAllChecked = arr.every(function (v) {
          return v.checked === true;
        });
        console.log(isAllChecked);
        document.querySelector(".all-sel").checked = isAllChecked;
      }


          //全选按钮事件
          function allSelChange(ipt) {
        console.log(ipt.checked);
        //让单选的状态跟全选一致
        let singleSelectArr = document.querySelectorAll(".single-select");
        singleSelectArr.forEach((v) => (v.checked = ipt.checked));
        calCountPrice();
      }
      function calCountPrice() {
        let singleSelectArr = document.querySelectorAll(".single-select");
        console.log(singleSelectArr);
        let count = 0;
        let countPrice = 0;
        singleSelectArr.forEach((ipt) => {
          if (ipt.checked == true) {
            console.log(ipt);
            //找到选中元素的父元素，根据父元素再找到子元素
            let currentLi = ipt.parentNode;
            let price = currentLi.querySelectorAll(".price").innerHTML;
            let pnum = currentLi.querySelectorAll(".pnum");
            let currentCount = price * pnum;
            console.log(currentCount);
            console.log(price);
            console.log(pnum);
            count = count + Number(pnum);
            countPrice += currentCount;
          }
        });
        console.log(count, countPrice);
        document.querySelectorAll(".count").innerHTML = count;
        document.querySelector(".price-sum").innerHTML = countPrice;
      }
      $(".me").text(localStorage.getItem("username"));
</script>

</body>
</html>